<template>
  <div class="user-info">
    <el-row :span="24">
      <el-col :span="8">
        <basic-container>
          <div class="user-info__content">
            <img class="user-info__img"
                 :src="form.avatar"
                 alt="" />
            <p class="user-info__name">{{form.username}}</p>
            <router-link class="user-info__setting"
                         :to="{path:'/info/setting'}">个人设置</router-link>
            <p class="user-info__desc">
              <span v-for="(item,index) in form.roleNames"
                    :key="index">
                {{item}}
              </span>
            </p>
            <!--<div class="user-info__detail-desc">
              <p><i class="el-icon-message"></i><span>{{form.email}}</span></p>
              <p><i class="el-icon-postcard"></i><span>{{form.deptName}}</span></p>
            </div>-->
            <!--<div class="user-info__divider"></div
            <h4>标签</h4>
            <div class="user-info__tags">
              <el-tag effect="plain"
                      v-for="(tag,index) in tags"
                      :key="index">
                {{tag}}
              </el-tag>
            </div>-->
          </div>
        </basic-container>
      </el-col>
      <el-col :span="16">
        <basic-container>
          <avue-tabs :option="option"
                     v-model="form"
                     @change="handleChange"
                     @submit="handleSubmit"></avue-tabs>
        </basic-container>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import option from "@/const/user/info";
import {changeAccountPwdByOriginal,saveOtherInfo} from "@/api/user";
export default {
  data () {
    return {
      type: "info",
      option: option,
      tags: [
        'Mall',
        'Roses',
      ],
      form: {}
    };
  },
  created () {
    this.form = this.userInfo;
  },
  computed: {
    ...mapGetters([
      "userInfo",
    ])
  },
  methods: {
    handleSubmit (form) {
      if(this.type == "password"){
        let newPwdTest= this.testPwd(form.newPassword)
        if(this.form.oldPassword == this.form.newPassword) {
          this.$message({
            message: '原密码不可与新密码相同',
            type: 'error'
          });
          return;
        }
        if(newPwdTest){
            if(form.newPassword != form.newPasswords){
                this.$message({
                    message: "两次输入的新密码不一致",
                    type: "error"
                });
                return;
            }
            changeAccountPwdByOriginal(form.oldPassword,form.newPassword).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: "设置成功",

                        type: "success"
                    });
                }else{
					//提示重复 这里不用提示 了
                    this.$message({
                        message: res.data.message,
                        type: "error"
                    });
                }
            })
        }
      else {
            this.$message({
                type: "error",
                message: "密码为6-20为数字字母的组合,不能包含特殊符号"
            });
            return;
        }
      }else{
        //上传用户信息
        console.log(form)
        let data = {
          avatar:form.avatar,
          name:form.name
        }
        // saveOtherInfo(data).then(res=>{
        //   console.log(res)
        //   if(res.data.code == 200){
        //     this.$message({
        //       type: "success",
        //       message: "操作成功!"
        //     });
        //   }
        // })

        let address= {
          areaId:'',
          areaInfo: form.dz
        }
        Promise.all([saveOtherInfo(data)]).then(res=>{
            console.log(res)
			if(res[0].data.code == 200){
              location.reload();
				if(res[1].data.code == 200){
					this.$message({
						message: "设置成功",
						type: "success"
					});
				}else{
					this.$message({
						message: res.data.message,
						type: "error"
					});
				}

			}else{
				this.$message({
					message: res.data.message,
					type: "error"
				});
			}
        })
      }
    },

    //校验输入的密码
    testPwd(value){
        let testPwdFlag = false;
        if(value!=0){
            if (!value) {
                return testPwdFlag = false;
            }
        }

        let newValue= value.replace(/\s*/g,"");
        const re = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        const test = re.test(newValue);
        if(test){
            return testPwdFlag = true ;
        }
        else {
            return testPwdFlag = false;
        }
    },

    handleChange (item) {
      this.type = item.prop;
    }
  }
};
</script>

<style lang="scss">
.user-info {
  .avue-tabs {
    padding: 0 10px;
  }
  .el-tabs__content {
    padding: 20px 0;
  }
  &__img {
    display: block;
    margin: 0 auto;
    border-radius: 100%;
    width: 100px;
    height: 100px;
  }
  &__name {
    text-align: center;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 0;
    margin-top: 10px;
  }
  &__setting {
    margin-bottom: 12px;
    display: block;
    font-size: 12px;
    color: #F39800;
    text-align: center;
  }
  &__desc {
    text-align: center;
    width: 200px;
    margin: 0 auto;
  }
  &__detail-desc {
    margin-top: 50px;
    font-size: 14px;
    p {
      margin-bottom: 10px;
    }
    span {
      margin-left: 10px;
    }
  }
  &__divider {
    border-top: 1px dashed #e8e8e8;
    display: block;
    height: 0;
    width: 100%;
    margin: 24px 0;
    clear: both;
  }
  &__tags {
    .el-tag {
      margin: 0 5px 5px 0;
    }
  }
}
</style>
